<template>
    <el-card class="reg"  shadow="hover">
        <div slot="header" class="title">
            <el-steps :active="active" align-center  finish-status="success" >
                <el-step title="填写注册"></el-step>
                <el-step title="激活邮箱"></el-step>
                <el-step title="注册成功"></el-step>
            </el-steps>
        </div>

        <!-- 填写注册 -->
        <steps-reg v-if="active == 0"/>

        <!-- 激活邮箱 -->
        <steps-active v-else-if="active == 1" />

        <!-- 注册成功 -->
        <steps-success v-else/>
    </el-card>
</template>

<script>

    import stepsReg from "./components/stepsReg";
    import stepsActive from "./components/stepsActive";
    import stepsSuccess from "./components/stepsSuccess";

    export default {
        name: "reg",
        components:{
            stepsReg,
            stepsActive,
            stepsSuccess,
        },
        data() {
            return {
                active:0,
            }
        },
        mounted() {
            this.init()
        },
        watch: {
            $route() {
                this.init()
            }
        },
        methods: {
            init(){
                this.active = this.$route.query.active?Number(this.$route.query.active) : 0
            },
        },
    }
</script>

<style scoped lang="less">

</style>

